import React, { Children, useState } from "react";
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import logo from "../assets/images/logo.png";
import { Outlet, Link } from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;

const items = [
    {
        label: <Link to="/home">首页</Link>,
        key: "/home/",
        icon: <DesktopOutlined />,
    },
    {
        label: <Link to="/home/user">用户管理</Link>,
        key: "/home/user",
        icon: <FileOutlined />,
    },
    {
        label: <Link to="/home/role">角色管理</Link>,
        key: "/home/role",
        icon: <FileOutlined />,
    },
    {
        label: <Link to="/home/shop">店铺管理</Link>,
        key: "/home/shop",
        icon: <FileOutlined />,
    },
    {
        label: <Link>商品管理</Link>,
        key: "/product",
        icon: <PieChartOutlined />,
        children: [
            {
                label: <Link to="/home/productList">商品列表</Link>,
                key: "/home/productList",
                icon: <TeamOutlined />,
            },
            {
                label: <Link to="/home/productCategory">商品分类</Link>,
                key: "/home/productCategory",
                icon: <TeamOutlined />,
            },
        ],
    },
    {
        label: <Link >财务管理</Link>,
        key: "/charts",
        icon: <PieChartOutlined />,
        children: [
            {
                label: <Link to="/home/salary">工资数据</Link>,
                key: "/home/salary",
                icon: <TeamOutlined />,
            },
            {
                label: <Link to="/home/sale">销售数据</Link>,
                key: "/home/sale",
                icon: <TeamOutlined />,
            },
        ],
    },
];
const Home = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <Layout
            style={{
                minHeight: "100vh",
            }}
        >
            <Sider
                collapsible
                collapsed={collapsed}
                onCollapse={(value) => setCollapsed(value)}
            >
                <div
                    style={{
                        padding: "20px 0px 0px 20px",
                        boxSizing: "border-box",
                    }}
                >
                    <img width="150px" src={logo} alt="" />
                </div>
                <Menu
                    theme="dark"
                    defaultSelectedKeys={["1"]}
                    mode="inline"
                    items={items}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                />
                <Content
                    style={{
                        margin: "0 16px",
                    }}
                >
                    <Breadcrumb
                        style={{
                            margin: "16px 0",
                        }}
                    >
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet></Outlet>
                    </div>
                </Content>
                <Footer
                    style={{
                        textAlign: "center",
                    }}
                >
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};
export default Home;
